<link href="/Public/css/common/jquery.stepy.css" rel="stylesheet">
<link href="/Public/css/common/switchery.css" rel="stylesheet" />
<style>
    .image-upload{position:absolute;left:150px;margin-top:70px}
</style>
<?php
    use User\Model\LiveModel;
?>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <present name="live_room">编辑<else/>添加</present>直播
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="square-widget">
                        <div class="widget-container">
                            <div class="stepy-tab">
                            </div>
                            <form id="default" class="form-horizontal" action="/User/Live/update" method="post" enctype="multipart/form-data" onsubmit="return formcheck();">
                                <input type="hidden" name="id" value="{$id}">
                                <fieldset title="主播账号">
                                    <legend>第一步</legend>
                                        <div class="form-group">
                                            <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>主播账号</label>
                                            <div class="col-lg-6">
                                                <input class="form-control valid" style="border:0" name="account" onkeyup="accountKeyup(this.value)" title="主播账号" value="{$live_user['account']}" placeholder="昵称/用户名（5~30位字符）">
                                            </div>
                                            <p class="help-block account-warn" style="color:red; display:none">账号长度必须在5~30位之间</p>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>主播密码</label>
                                            <div class="col-lg-6">
                                                <input class="form-control old-password" name="old_password" <if condition="$id eq -1">style="border:0;display:none"</if> type="password" readonly title="主播密码" onkeyup="passwordKeyup(this.value)" onblur="passwordBlur()" value="{$live_user['password']}" >
                                                <input class="form-control new-password" name="new_password" <if condition="$id egt 1">style="border:0;display:none"</if> type="password" title="新主播密码" onkeyup="passwordKeyup(this.value)" onblur="passwordBlur()" value="" >
                                                <if condition="$id egt 1">
                                                    <span class="btn btn-default" style="margin-left:0px" onclick="changePassword()" title="修改">修改</span>
                                                </if>
                                            </div>
                                            <p class="help-block password-warn" style="color:red; display:none">密码长度仅限6~25个字符</p>
                                        </div>
                                </fieldset>
                                <fieldset title="直播房间">
                                    <legend>第二步</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>直播间名称</label>
                                        <div class="col-lg-6">
                                            <input class="form-control valid" name="title" title="请输入直播间名称" value="{$live_room['title']}" placeholder="请输入直播间名称">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>直播间头像</label>
                                        <div class="col-lg-6">
                                            <input type="hidden" name="avatar" value="{$live_user['avatar']}">
                                            <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                            <empty name="live_user.avatar">
                                                <img src="" class="thumbnail" width="100" height="100">
                                            <else/>
                                                <img src="{$live_user['avatar']}" class="thumbnail" width="100" height="100">
                                            </empty>
                                            <p class="help-block">图片为100px*100px的png、jpg、gif格式图片</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"><span style="color:red">*</span>直播间背景</label>
                                        <div class="col-lg-6">
                                            <input type="hidden" name="poster" value="{$live_room['poster']}">
                                            <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                            <empty name="live_room.poster">
                                                <img src="/Public/images/live/home_bg.png" class="thumbnail" width="100" height="100">
                                            <else/>
                                                <img src="{$live_room['poster']}" class="thumbnail" width="100" height="100">
                                            </empty>
                                            <p class="help-block">图片为410px*180px的jpg格式图片</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style="color:red">*</span>直播分类</label>
                                        <div class="col-sm-6 col-xs-12">
                                            <div class="form-control-static">
                                                <select name="category" class="form-control">
                                                    <volist name="live_category" id="category">
                                                        <option value="{$category['id']}" <if condition="$category['id'] eq $live_room['category']">selected</if>>{$category['name']}</option>
                                                    </volist>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 col-sm-2 control-label">直播间简介</label>
                                        <div class="col-md-6 col-sm-6">
                                            <textarea name="info" id="editor-container" style="width:550px;height:300px;"></textarea>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset title="分享设置">
                                    <legend>第三步</legend>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享标题</label>
                                        <div class="col-lg-6">
                                            <input class="form-control" name="share_title" value="{$live_room['share_title']}">
                                            <p class="help-block">默认为直播间名称，最多16个汉字</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享描述</label>
                                        <div class="col-lg-6">
                                            <textarea class="form-control" rows="5" name="share_desc" title="请输入分享描述">{$live_room['share_desc']}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">分享链接</label>
                                        <div class="col-lg-6">
                                            <input class="form-control" name="share_link" value="{$live_room['share_link']}">
                                            <p class="help-block">默认是首页的链接</p>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label"> 分享图标</label>
                                        <div class="col-lg-6">
                                            <input type="hidden" name="share_image" value="{$live_room['share_image']}">
                                            <input type="file" class="image-upload" onchange="uploadImage(this, [], [], 0, false, true);" accept="image/gif,image/jpeg,image/jpg,image/png">
                                            <empty name="live_room.share_image">
                                                <img src="" class="thumbnail" width="100" height="100">
                                            <else/>
                                                <img src="{$live_room['share_image']}" class="thumbnail" width="100" height="100">
                                            </empty>
                                            <p class="help-block">图片为80px*80px的png、jpg格式图片</p>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-info finish">提交</button>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/Public/js/common/check-upload-file.js"></script>
<script src="/Public/js/common/switchery.js" ></script>
<script src="/Public/js/common/ios-init.js" ></script>
<script src="/Public/js/common/jquery.stepy.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/common/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/common/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/common/lang/zh-cn/zh-cn.js"></script>
<script>
    var editor = UE.getEditor('editor-container');
    var content = '<?php if(empty($live_room["info"])){}else{ echo $live_room["info"]; }?>';
    editor.addListener("ready", function () {
        editor.setContent(content);
    });
</script>
<script>
    var isShow = false;
    function accountKeyup(value){
        if(value.length > 30 || value.length < 5){
            $(".account-warn").show();
        }else{
            $(".account-warn").hide();
        }
    }

    function passwordKeyup(value){
        if(value.length > 25 || value.length < 6){
            $(".password-warn").show();
        }else{
            $(".password-warn").hide();
        }
    }

    function passwordBlur(){
        $(".password-text").val($(".password-password").val());
    }

    function changePassword() {
        $(".new-password").show();
        $(".old-password").hide();
    }

    function uploadImage(c, types, size, kb, isCheck, isImage){
        var img = c.files[0];
        var _this = $(c);
        var url = "/User/Live/uploadFile";
        checkFile(_this, img, types, size, kb, isCheck, isImage, url);
    }

    $('#default').stepy({
        backLabel: '上一步',
        block: true,
        nextLabel: '下一步',
        titleClick: true,
        titleTarget: '.stepy-tab',
        finishButton:false
    });

    $(".button-back").click(function(){
        $('html,body').animate({scrollTop:0},'800');
    })

    $(".button-next").click(function(){
        $('html,body').animate({scrollTop:0},'800');
    })

    function formcheck() {
        var ret = true;
        $('fieldset:eq(1)').find('.valid').each(function(){
            if($(this).val() == ''){
                reLocate(1, 0);
                alert($(this).attr('title'));
                ret = false;
                return ret;
            }
        })
        if(ret == true){
            if($("input[name=avatar]").val() == ""){
                reLocate(1, 300);
                alert("请上传直播间头像");
                ret = false;
                return ret;
            }
        }
//        if(ret == true){
//            if($("input[name=poster]").val() == ""){
//                reLocate(1, 300);
//                alert("请上传直播间背景");
//                ret = false;
//                return ret;
//            }
//        }
        if(ret == true){
            var account = $("input[name=account]").val();
            var old_password = $("input[name=old_password]").val();
            var new_password = $("input[name=new_password]").val();
            if(account.length > 30 || account.length < 5){
                reLocate(0, 0);
                $(".account-warn").show();
                alert("账号长度必须在5~30位之间");
                ret = false;
                return ret;
            }
            if($('.old-password').css('display') == 'none'){
                if(new_password.length > 25 || new_password.length < 6){
                    reLocate(0, 0);
                    $(".password-warn").show();
                    alert("密码长度必须在6~25位之间");
                    ret = false;
                    return ret;
                }
            }
        }
        $('html,body').animate({scrollTop:0},'800');
        return ret;
    }

    function reLocate(num, location){
        $("#default-titles").children("li").removeClass("current-step");
        $("#default-title-"+num).addClass("current-step");
        $("#default-step-2").css("display", "none");
        $("#default-step-"+num).css("display", "block");
        $('html,body').animate({scrollTop:location},'800');
    }
</script>